<template>
  <div id="productPopover" class="product-popover-view">

    <el-popover ref="popover1" v-model:visible="visible" :placement="position" :width="900" trigger="manual">
      <template #reference>
        <slot />
      </template>
      <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
        <div>
          <span v-if="column">{{ getProductName(column) }}</span>
        </div>

        <div class="btn-view">

          <el-button class="main-btn" size="small" type="primary" @click="onCancel">取消
          </el-button>

          <el-button class="main-btn" size="small" type="primary" @click="onConfirm">确定
          </el-button>
        </div>

      </div>
      <el-table ref="singleTable" header-cell-class-name="popover-table-header" border :data="tableData"
        highlight-current-row style="width: 100%" @current-change="handleCurrentChange">
        <el-table-column label="通用名" prop="productPopularName" show-overflow-tooltip />

        <el-table-column label="商品名" prop="productName" show-overflow-tooltip />

        <el-table-column label="包装规格" prop="packSpecs" show-overflow-tooltip />

        <el-table-column label="生产厂家" prop="producer" show-overflow-tooltip />

        <el-table-column label="批准文号" prop="approvalNumber" show-overflow-tooltip />

      </el-table>
    </el-popover>

  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  ref,
  watch,
} from "vue";

export default defineComponent({
  name: "Index",
  props: {
    searchs: {
      type: String,
      default: "",
    },
    position: {
      type: String,
      default: "bottom-start",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    var visible = ref(false);
    var tableData = ref([]);
    var column = ref(null);
    const singleTable = ref(null);

    const getData = () => {
      if (props.searchs) {
        api.businessAgreement.BUSINESSAGREEMENT_NEW_PRODUCT(props.searchs).then((res) => {
          if (!res.code && res.data) {
            tableData.value = res.data.list;
          }
        });
      }
    };

    watch(
      () => props.searchs,
      (newS, oldS) => {
        if (!props.disabled) {
          getData();
          visible.value = true;
        }
      }
    );

    onMounted(() => {
      document.addEventListener("click", function (e) {
        // console.log(document.getElementById('productPopover'))
        var pop = document.getElementById("productPopover");

        if (e.target !== pop && !document.contains(pop, e.target)) {
        } else {
          visible.value = false;
        }
      });
    });

    const handleCurrentChange = (val) => {
      column.value = val;
    };

    const onConfirm = () => {
      if (!column) {
        currentInstance.proxy.customMessage({
          type: "error",
          message: "请选择产品",
        });
      }
      const a = JSON.parse(JSON.stringify(column.value));
      emit("confirm", a);
      column.value = null;
      setTimeout(() => {
        visible.value = false;
      }, 100);
    };

    const onCancel = () => {
      singleTable.value.setCurrentRow();
      column.value = null;
      visible.value = false;
    };

    const onClose = () => {
      visible.value = false;
    };

    return {
      visible,
      tableData,
      singleTable,
      column,

      handleCurrentChange,
      onConfirm,
      onCancel,
      onClose,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
</style>
